<template>
  <div>
    <!-- 弹出购物框 -->
    <div class="foods-car f-noactive" is-link @click="showPopup">
      <img v-if="store_foodsFlag" src="@/assets/imgs/nohave.png" alt="">
      <img v-else src="@/assets/imgs/have.png" alt="">

      <div class="count-money">
        <p>￥<span>{{store_foodsMoneyTotal[0]}}</span></p>
        <p>另需配送费￥{{storeInfo.deliveryPrice}} | 支持自取</p>
      </div>
      <div v-if="judgeFoods" class="short-count">还差￥{{(storeInfo.minPrice-store_foodsMoneyTotal[0]).toFixed(2)}}元起送</div>
      <div v-else class="count">去结算</div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" :lock-scroll="true">
      <div class="notice">新用户下单立减5元</div>
      <div class="clear-car">
        <span>购物车</span>
        <p @click="clearCar">
          <van-icon name="delete-o" />清空购物车
        </p>
      </div>
      <ul class="foods">
        <li v-for="(item,index) in store_foods" :key="index">
          <p>{{item.name}}</p>
          <p>￥{{item.price}}</p>
          <p><em @click.stop="addSubtract(item,-1)">-</em><span>{{item.num}}</span><em @click.stop="addSubtract(item,1)">+</em></p>
        </li>
      </ul>
    </van-popup>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { getGoodsList_api } from "@/apis/goods.js";
import { getSeller_api } from "@/apis/seller.js";
@Component
export default class extends Vue {
  goodsList: any = []; //不知道怎么写typeScript
  storeInfo: any = {};
  show = false; //弹框

  addSubtract(value, n) {
    //对象传地址
    value.num += n;
  }
  showPopup() {
    this.show = !this.show;
  }

  //计算属性，获得仓库中的商品列表
  get store_goodsList() {
    return this.$store.state.goodsList;
  }
  //计算属性，获取筛选的商品
  get store_foods() {
    return this.$store.getters.filterfoods;
  }

  //计算属性，获取筛选的商品的钱总和
  get store_foodsMoneyTotal() {
    let money = 0;
    let total = 0;
    this.$store.getters.filterfoods.forEach((item) => {
      money = money + item.price * item.num;
      total = total + item.num;
    });
    return [money.toFixed(2), total];
  }
  //计算属性，判断是否有选择地商品
  get store_foodsFlag() {
    return this.$store.getters.filterFlag;
  }
  //计算属性，判断是否可以结算
  get judgeFoods() {
    let a: any = this.store_foodsMoneyTotal[0];
    let b: any = this.storeInfo.minPrice;
    if (b - a <= 0) {
      return false;
    } else {
      return true;
    }
  }
  //清空购物车
  clearCar() {
    this.$store.commit("clearData");
  }
  //左右联动效果
  async created() {
    let res = await getGoodsList_api(); //异步
    // 双重循环--->for...of...循环
    //给商品列表中的食物添加一个数量字段
    for (const object of res.data.goodsList) {
      for (const obj of object.foods) {
        obj.num = 0;
      }
    }
    this.goodsList = res.data.goodsList;
    //console.log(this.goodsList);
    this.$store.commit("getgoodslist", this.goodsList); //将数据传给仓库
    //获取商家信息
    let result = await getSeller_api();
    this.storeInfo = result.data.data;
  }
}
</script>

<style lang="scss" scoped>
.foods-car {
  position: fixed;
  z-index: 7777;
  bottom: 2%;
  left: 5%;
  width: 90%;
  height: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  img {
    width: 48px;
    height: 70px;
    margin-top: -20px;
    margin-left: 15px;
  }
  .count-money {
    padding: 5px;
    margin-left: -24px;
    p:first-child {
      color: #fff;
      font-size: 16px;
      font-weight: bold;
      margin-bottom: 4px;
      span {
        font-size: 20px;
      }
    }
    p:last-child {
      color: #999999;
      font-size: 12px;
    }
  }
  .short-count {
    width: 25%;
    line-height: 50px;
    color: #fff;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    text-align: center;
    font-size: 12px;
  }
  .count {
    width: 25%;
    line-height: 50px;
    color: #000;
    background-color: #ffc300;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    text-align: center;
  }
}
.f-noactive {
  background-color: #222426;
}

.van-popup {
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  .notice {
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #fee7c8;
    font-size: 14px;
    color: #e13f0e;
  }
  .clear-car {
    display: flex;
    justify-content: space-between;
    margin: 15px 10px;
    font-size: 14px;
    p {
      color: #999999;
    }
  }
  ul {
    overflow-y: scroll;
  }
  li {
    margin: 15px 10px;
    display: flex;
    justify-content: space-between;
    p:first-child {
      width: 50%;
      color: #000;
      font-weight: 600;
      //单行溢出隐藏
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    p:nth-child(2) {
      color: #ff3300;
      font-weight: bold;
    }
    p:last-child {
      display: flex;
      align-items: center;
      span {
        margin: 0 8px;
      }
      em {
        display: inline-block;
        width: 20px;
        height: 20px;
        font-weight: bold;
        font-size: 18px;
        border-radius: 5px;
        background-color: #ffc300;
        text-align: center;
        line-height: 20px;
      }
      em:first-of-type {
        color: #aaaaaa;
        border: 1px solid #dddddd;
        background-color: #fff;
      }
    }
  }
}
</style>